<!DOCTYPE html>
<html>
	<head>
		<title>-添加/修改</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<style type="text/css">
			.c-panel .el-form .c-label{width: 7em !important;}
			.c-panel .el-form .el-input, .c-panel .el-form .el-textarea__inner{width: 250px;}
		</style>
	</head>
	<body style="text-align: center">
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<!-- ------- 内容部分 ------- -->
			<div class="s-body">
				<div class="c-panel">
						<!-- 客户--->

						<el-row>
							<el-col :span="12"><div><span>客户:</span>
								<el-select v-model="ord.customerId" filterable placeholder="请选择客户">
									<el-option
											v-for="item in options"
											:key="item.customerId"
											:label="item.custName"
											:value="item.customerId">
									</el-option>
								</el-select></div></el-col>
							<el-col :span="12"><div><sa-item type="enum" name="订单状态" v-model="ord.status" :jv="{1: '已结清', 0: '未结清'}" jtype="3"></sa-item></div></el-col>
						</el-row>

					<el-card v-if="orderGoods" v-for="(item,index) in orderGoods">
						<div class="block">
							<span class="demonstration">商品名称</span>
							<el-cascader
									v-model="item.goodId"
									:options="goods"
									:show-all-levels="false"
									:props="{ multiple: false, checkStrictly: true,emitPath: false }"
									@change="handlerChange"
									clearable></el-cascader>
						</div>
						<label>商品数量</label>
						<el-input-number v-model="item.count" @change="handleChange(index)" :min="1"  label="商品数量"></el-input-number>
						<label>商品单价</label>
						<el-input-number v-model="item.unitPrice" :precision="2" :step="0.5" @change="unitPriceChange(index)" ></el-input-number>元

						<sa-item type="money" name="小计" v-model="item.price"></sa-item>
						<el-button @click.prevent="removeDomain(index)">删除</el-button>
					</el-card>



					<sa-item><el-button type="primary" icon="el-icon-plus" @click="createGood">添加商品</el-button>
							</sa-item>
					<br>
					<sa-item type="textarea" name="备注" v-model="ord.note"></sa-item>


				</div>
				<el-row type="flex"  justify="center">
					<el-col :span="6"><div><el-tag effect="dark" type="danger" size="medium" v-text="'总价：'+totalPrice+'元'"></el-tag></div></el-col>
					<el-col :span="6"><div><el-tag effect="dark" type="success"> 已付金额</el-tag>
						<el-input-number v-model="ord.amountPaid" :precision="2" :step="0.1"></el-input-number>元</div></el-col>
					<el-col :span="6"><div><el-button type="primary" icon="el-icon-s-promotion" @click="f5">提交</el-button></div></el-col>
				</el-row>

			</div>
			<!-- ------- 底部按钮 ------- -->
		</div>
        <script>
			
			var app = new Vue({
				components: {
					"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue')
				},
				el: '.vue-box',
				data() {
					return {
						options: [],
						ord:{
							customerId:'',
							status:0,
							amountPaid:0,
							note:''
						},
						goods:[],
						orderGoods:[
							{
								goodId:'',
								count:1,
								unitPrice:0,
								price:0,
							}
						],
						totalPrice:0
					}
				},
				methods: {
					f5:function (){
						sa.ajax('/order/saveOrder',{order:JSON.stringify(this.ord),goods:JSON.stringify(this.orderGoods)},function (res){
							sa.ok("添加成功！")
							parent.app.f5();		// 刷新父页面列表
							sa.closeCurrIframe();	// 关闭本页
						})
					},
					getTotalPrice:function (){
						this.totalPrice=0;
						this.orderGoods.findIndex(e=>{
							this.totalPrice=e.price+this.totalPrice
						})
					},
					removeDomain:function (index){
						this.orderGoods.splice(index,1);
						this.getTotalPrice();
					},
					unitPriceChange:function (index){
						this.orderGoods[index].price=this.orderGoods[index].count*this.orderGoods[index].unitPrice;
						this.getTotalPrice();
					},
					handleChange:function (index){
						this.orderGoods[index].price=this.orderGoods[index].count*this.orderGoods[index].unitPrice;
						this.getTotalPrice();
					},
					handlerChange:function (value){
						if(value!=null){
							sa.ajax('/good/getPriceById/'+value,function (res){
								this.orderGoods.findIndex(e=>{
									if(e.goodId===value){
										e.unitPrice=res.data
										e.price=e.count*e.unitPrice
										this.getTotalPrice();
									}
								})
							}.bind(this))
						}
					},

					createGood:function (){
						this.orderGoods.push({
							goodId:'',
							count:1,
							unitPrice:0,
							price:0,
						});
					},
				},
				mounted: function(){

					// 初始化数据

					sa.ajax('/customer/getCustomerAll',function(res){
						this.options=res.data
					}.bind(this));
					sa.ajax('/good/getGoods',function(res){
						this.goods=res.data
					}.bind(this));
									}
			})
			
		</script>
	</body>
</html>